<template>
  <view class="cart-container">
    <!-- 顶部标题 -->
    <view class="cart-header">
      <text class="title">购物车</text>
    </view>

    <!-- 购物车列表 -->
    <scroll-view
      class="cart-list"
      scroll-y
      :style="{ paddingBottom: cartList.length > 0 ? '120rpx' : '0' }"
    >
      <view class="empty-cart" v-if="cartList.length === 0">
        <image src="/static/empty-cart.png" mode="aspectFit"></image>
        <text class="empty-text">购物车是空的哦~</text>
        <button class="btn-go-shopping" @click="goToProductList">去逛逛</button>
      </view>

      <cart-item
        v-for="(item, index) in cartList"
        :key="item.id"
        :product="item"
        @change-count="handleChangeCount(index, $event)"
        @toggle-select="handleToggleSelect(index)"
        @remove-item="handleRemoveItem(index)"
      />
    </scroll-view>

    <!-- 底部批量操作栏 -->
    <view class="batch-bar-wrapper" v-if="cartList.length > 0">
      <batch-bar
        :selected-count="selectedCount"
        :total-price="totalPrice"
        :is-all-selected="isAllSelected"
        @batch-delete="handleBatchDelete"
        @batch-checkout="handleBatchCheckout"
        @toggle-all="handleToggleAll"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import CartItem from "./components/CartItem.vue";
import BatchBar from "./components/BatchBar.vue";
// 购物车数据
const cartList = ref([
  {
    id: 1,
    cover: "/static/product.jpg",
    name: "高端智能手机",
    desc: "旗舰配置 超长续航",
    spec: "8GB+256GB 黑色",
    price: 3999,
    count: 1,
    selected: true,
    stock: 100,
  },

  {
    id: 2,
    cover: "/static/product.jpg",
    name: "高端智能手机",
    desc: "旗舰配置 超长续航",
    spec: "8GB+256GB 黑色",
    price: 3999,
    count: 1,
    selected: true,
    stock: 100,
  },
  // 更多商品数据...
]);

// 计算属性
const selectedCount = computed(() => {
  return cartList.value.filter((item) => item.selected).length;
});
const totalPrice = computed(() => {
  return cartList.value
    .filter((item) => item.selected)
    .reduce((sum, item) => sum + item.price * item.count, 0);
});

// 方法
const handleChangeCount = (index, newCount) => {
  if (newCount < 1) newCount = 1;
  if (newCount > cartList.value[index].stock) {
    uni.showToast({
      title: "库存不足",
      icon: "none",
    });
    return;
  }
  cartList.value[index].count = newCount;
};

const handleToggleSelect = (index) => {
  cartList.value[index].selected = !cartList.value[index].selected;
};

const handleRemoveItem = (index) => {
  uni.showModal({
    title: "提示",
    content: "确定要删除该商品吗？",
    success: (res) => {
      if (res.confirm) {
        cartList.value.splice(index, 1);
        uni.showToast({
          title: "删除成功",
          icon: "success",
        });
      }
    },
  });
};

const handleBatchDelete = () => {
  if (selectedCount.value === 0) {
    uni.showToast({
      title: "请选择商品",
      icon: "none",
    });
    return;
  }

  uni.showModal({
    title: "提示",
    content: `确定要删除选中的${selectedCount.value}件商品吗？`,
    success: (res) => {
      if (res.confirm) {
        cartList.value = cartList.value.filter((item) => !item.selected);
        uni.showToast({
          title: "删除成功",
          icon: "success",
        });
      }
    },
  });
};

const handleBatchCheckout = () => {
  if (selectedCount.value === 0) {
    uni.showToast({
      title: "请选择商品",
      icon: "none",
    });
    return;
  }

  const selectedProducts = cartList.value.filter((item) => item.selected);
  uni.navigateTo({
    url: `/pages/order/create?products=${encodeURIComponent(
      JSON.stringify(selectedProducts)
    )}`,
  });
};

const goToProductList = () => {
  uni.switchTab({
    url: "/pages/product/list",
  });
};

const handleToggleAll = (shouldSelect) => {
  cartList.value = cartList.value.map((item) => ({
    ...item,
    selected: shouldSelect,
  }));
};

// 页面显示时刷新数据
onShow(() => {
  // 这里可以添加从服务器获取购物车数据的逻辑
});

// 计算是否全部选中
const isAllSelected = computed(() => {
  return (
    cartList.value.length > 0 && cartList.value.every((item) => item.selected)
  );
});
</script>

<style lang="scss">
@import "@/uni.scss";
.cart-container {
  position: relative;
  height: calc(100vh - var(--window-bottom, 50px));
  display: flex;
  flex-direction: column;
  .batch-bar-wrapper {
    position: relative; /* 改为相对定位 */
    width: 100%;
    background: #fff;
  }
  .cart-header {
    padding: 20rpx 30rpx;
    background-color: $white-bg;;

    .title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .cart-list {
    flex: 1;
    .empty-cart {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 100rpx;

      image {
        width: 300rpx;
        height: 300rpx;
      }

      .empty-text {
        margin: 30rpx 0;
        font-size: $font-size-28rpx;
        color: #999;
      }

      .btn-go-shopping {
        width: 200rpx;
        height: 70rpx;
        line-height: 70rpx;
        background-color: $primary-color;
        color: $text-color-inverse;
        font-size: $font-size-28rpx;
        border-radius: 35rpx;
      }
    }
  }
}
</style>
